<template>
  <div class="friends">
    <yd-tab class="tabModel" height="0.98667rem" v-model="currentTab" :callback="fn" :prevent-default="false" font-size="0.37333rem" color="#bfbfbf" active-color="#41CB47" :item-click="itemClick">
        <yd-tab-panel :class="{'tab-con':true,'bgTab':currentTab==1}" v-for="item in tabs" :label="item.label">
        	<div class="myfocus" v-if="currentTab==0">
		  		<mt-index-list>
		  			<div class="specialfocus">
		  				<div class="userindex specialfocustext">特别关注</div>
		  				<div class="userlist specialfocusList">
		  					<div class="useritem specialfocusitem" v-for="item,i in specialfocusList" :key="i" @click="godetail(item)">
		  						<div class="item-con">
  									<span class="item-icon"><img :src="item.src"></span>
		  							<span class="item-name">{{item.name}}</span>
		  						</div>
		  					</div>
		  				</div>
		  			</div>
				  	<mt-index-section v-for="item,i in list" :index="item.index" :key="i">
		  				<div class="userlist">
		  					<div class="useritem" @click="godetail(item)" v-for="useritem,index in item.list" :key="index">
		  						<div class="item-con">
  									<span class="item-icon"><img :src="useritem.src"></span>
		  							<span class="item-name">{{useritem.name}}</span>
		  						</div>
		  					</div>
		  				</div>
				  	</mt-index-section>
				</mt-index-list>
		  	</div>
        	<div class="ranking" v-if="currentTab==1">
		  		<div class="rankingitem myranking">
		  			<div class="rankingnum myrankingnum">89</div>
		  			<div class="usericon"><img src="http://static.ydcss.com/uploads/lightbox/meizu_s1.jpg"></div>
		  			<div class="userinfo">
		  				<span class="username">我的名字</span>
		  				<span class="usertext">击败全国40%的用户，继续加油!</span>
		  			</div>
		  			<div class="waternum">150ml</div>
		  			<div class="likeswrap">
		  				<span class="likesnum">2</span>
		  				<span class="haslike yadu-icon-dianzan"></span>
		  			</div>
		  		</div>
		  		<div class="tabBtn">点击查看我的好友排行</div>
		  		<div class="rankingwrap">
		  			<div class="rankinglist">
			  			<div class="rankingitem" v-for="item,i in allRanking">
			  				<div class="rankingnum myrankingnum">{{i}}</div>
				  			<div class="usericon"><img :src="item.src"></div>
				  			<div class="userinfo">
				  				<span class="username">{{item.name}}</span>
				  			</div>
				  			<div class="waternum">{{item.waternum||0}}ml</div>
				  			<div class="likeswrap">
				  				<span class="likesnum">{{item.likesnum||0}}</span>
				  				<span :class="{'haslike':item.islike, 'yadu-icon-dianzan':true}"></span>
				  			</div>
			  			</div>
			  		</div>
		  		</div>
		  	</div>
        </yd-tab-panel>
    </yd-tab>
  </div>
</template>

<script>

export default {
  name: 'friends',
  components: {
  },
  data(){
  	return{
  		currentTab:0,
  		tabs:[
  			{label:'我的关注'},
  			{label:'排行榜'}
  		],
  		specialfocusList:[
  			{name:'特别关注1',src:'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg'},
  			{name:'特别关注2',src:'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg'}
  		],
  		list:[
  			{
  				index:'A',
  				list:[
  					{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s1.jpg',name:'aa'},
  					{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s1.jpg',name:'ab'},
  					{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s1.jpg',name:'ac'},
				]
			},
			{
  				index:'B',
  				list:[
  					{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'ba'},
  					{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s3.jpg',name:'bb'},
  					{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s4.jpg',name:'bc'},
				]
			},
			{
  				index:'C',
  				list:[
  					{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s5.jpg',name:'ca'},
  					{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s6.jpg',name:'cb'},
  					{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'cc'},
				]
			},
			{
  				index:'D',
  				list:[
  					{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s5.jpg',name:'da'},
  					{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s6.jpg',name:'db'},
  					{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'dc'},
				]
			},
  		],
  		allRanking:[
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s1.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:true},
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:false},
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:false},
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:false},
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:false},
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:false},
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:false},
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:false},
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:false},
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:true},
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:false},
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:false},
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:false},
  			{src: 'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',name:'aa',waternum:'2500',likesnum:'20',islike:false},

		]
  	}
  },
  methods:{
  	itemClick(key){
  		this.currentTab = key;
  	},
  	fn(label, key) {
        console.log(label, key);
    },
    godetail(item){
    	console.log(item);
    	this.$router.push('/frienddetail');
    }
  }
}
</script>
<style lang="scss">
	@import "../style/public.scss";
	.friends{
	    background: #f1f1f1;
	    height:100%;
	    .tabModel{
	    	height:100%;
	    	.yd-tab-panel{
	    		height: calc(100% - 0.98667rem);
	    		.yd-tab-panel-item{
	    			height:100%;
	    		}
	    	}
	    	.myfocus{
	    		height:100%;
		    	text-align:left;
		    	.mint-indexlist{
		    		height:100%;
		    	}
		    	.mint-indexlist-content{
		    		margin-right:0!important;
		    		height:100%!important;
		    	}
		    	.mint-indexlist-nav{
		    		background-color: rgba(0,0,0,0);
		    		border:none;
		    		color:#878787;
		    		font-size:rem(24);
		    	}
	    		.userindex,.mint-indexsection-index{
	    			height:rem(52);
	    			line-height:rem(52);
	    			font-size:rem(24);
	    			color:#878787;
	    			background:#f1f1f1;
	    			padding:0 0 0 rem(22);
	    		}
	    		.userlist{
	    			.useritem{
	    				background:#fff;
	    				padding:rem(16) rem(22) 0;
	    				&:last-child{
	    					.item-con{
	    						border:none;
	    					}
	    				}
	    				.item-con{
	    					padding-bottom:rem(22);
	    					border-bottom:rem(2) solid #f1f1f1;
	    					display:flex;
	    					.item-icon{
	    						margin-right:rem(14);
		    					display:inline-block;
		    					width:rem(64);
		    					height:rem(64);
		    					img{
		    						width:rem(64);
		    						height:rem(64);
		    					}
		    				}
		    				.item-name{
		    					font-size:rem(32);
		    					display:inline-block;
		    					height:rem(64);
		    					line-height:rem(64);
		    					color:#808080;
		    				}
	    				}
	    			}
	    		}
		    }
		    .ranking{
		    	height:100%;
		    	.tabBtn{
		    		margin:rem(36) auto 0;
		    		background:#fff;
		    		font-size:rem(24);
		    		color:#c5c5c5;
		    		height:rem(66);
		    		line-height:rem(66);
		    		width:calc(100% - 1.06667rem);
		    		border-radius:rem(16) rem(16) 0 0;
		    	}
		    	.rankingwrap{
		    		padding:0 rem(20) 0;
	    			height:calc(100% - 2.90667rem);
		    		.rankinglist{
			    		overflow:auto;
			    		box-shadow: 0 0 rem(30) 0 rgba(193,193,193,.5);
			    		height:100%;
			    		background:#fff;
			    		border-radius:rem(16) rem(16) 0 0;
			    		.rankingitem:first-child{
			    			border-radius:rem(16) rem(16) 0 0;
			    		}
			    	}
		    	}
		    	.rankingitem{
		    		display:flex;
		    		padding:rem(25) rem(20);
		    		background:#fff;
		    		border-bottom:rem(2) solid #f1f1f1;
		    		&.myranking{
		    			padding:rem(25) rem(40);
		    			margin-top:rem(2);
		    		}
		    		.rankingnum{
		    			height:rem(64);
		    			line-height:rem(64);
		    			font-size:rem(24);
		    			color:#808080;
		    			margin-right:rem(32);
		    			&.myrankingnum{
		    				color:$defaultcolor;
		    			}
		    		}
		    		.usericon{
		    			height:rem(64);
		    			line-height:rem(64);
		    			margin-right:rem(22);
		    			img{
		    				height:rem(64);
		    				width:rem(64);
		    				vertical-align:middle;
		    			}
		    		}
		    		.userinfo{
		    			display:flex;
		    			text-align:left;
		    			flex-direction:column;
		    			flex:1;
		    			align-self:center;
		    			.username{
		    				font-size:rem(28);
		    				color:#808080;
		    			}
		    			.usertext{
		    				font-size:rem(20);
		    				color:#c5c5c5;
		    			}
		    		}
		    		.waternum{
		    			height:rem(64);
		    			line-height:rem(64);
		    			font-size:rem(32);
		    			color:$defaultcolor;
		    		}
		    		.likeswrap{
		    			display:flex;
		    			flex-direction:column;
		    			margin-left:rem(36);
		    			.likesnum{
		    				font-size:rem(24);
		    				color:#dbdbdb;
		    				margin-bottom:rem(4);
		    			}
		    			.yadu-icon-dianzan{
		    				color:#dbdbdb;
		    				&.haslike{
		    					color:#e27b20;
		    				}
		    			}
		    		}
		    	}
		    }
	    }
	}
</style>
